<template>
	<div class="group">
	<!-- 	<h2 class="pt30rem pb30rem fs34rem c333 bold align-center border-b">可参加的团</h2> -->				
		<ul class="pl30rem pr30rem layout flex-w w92 auto" v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
			<router-link tag="li" :to="'/ordering/detail/group-detail/'+ item.goods_id + '?ping=1'" class="pt25rem pb25rem" v-for="(item,index) in ListData" :key="index" style="width:48%;">
				<img class="list-left responsive-img" :src="img_url + item.pic_cover_mid+'?x-oss-process=image/resize,m_pad,w_300,h_300'" alt="">
				<p class="ellipsis fs32rem mt20rem mb30rem bold">{{ item.goods_name }}</p>
				<p><span  class="cxo-red-color fs28rem">￥{{ item.ping_price }}</span><del class="fs24rem c999 fr">原价{{ item.market_price}}元</del></p>

				<button class="mt25rem w100 pt20rem pb20rem bg-red white fs28rem bold circle-8">拼团中</button>
			</router-link>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无拼团信息'></default>
		</template>		

		<!-- 选择颜色分类尺寸 -->
	<!-- 	<popup v-model="popupVisible" position="bottom" class="w100">
			<div class="pl30rem pr30rem pb20rem" v-if="data">
				<div class="shop flex-left pt30rem pb30rem border-b">
					<img :src="specificationImg"  alt="">
					<div class="shop-text ml30rem">
						<p class="fs28rem c333 mb20rem bold">{{ data.goods_name }}</p>
						<span class="fs28rem c999" v-if="stock">库存:{{ stock }}</span>	
						<span class="fs28rem c999" v-else>库存:{{ data.stock }}</span>	
						<span class="block fs28rem c999 mb25rem" v-if="selectString <= 1">请选择规格数量</span>
						<span class="block fs28rem c999 mb25rem" v-else>规格：{{ selectString }}</span>
						<strong class="fs30rem red" v-if="price">￥{{ price }}</strong>
						<strong class="fs30rem red" v-else>￥{{ data.price }}</strong>
					</div>
				</div>
				<div class="couponList">
					<div class="specification">
						<div v-for="(item,n) in data.spec_list">
							<h3 class="pt15rem pb15rem fs30rem c333">{{ item.spec_name}}</h3>
							<ul class="flex-left pt15rem pb15rem border-b">
								<li class="fs28rem c333 border circle-8 pt15rem pb15rem pl25rem pr25rem mr15rem" :class="{ on : subIndex[n] == index }" v-for="(items,index) in item.value" @click="selectCate(items,n,index)">{{ items.spec_value_name }}
								</li>
							</ul>
						</div>
					</div>
					<div class="mt30rem mb30rem">
						<h3 class="pt15rem pb15rem fs30rem c333">数量</h3>
						<div class="layout quantity">
							<i class="iconfont icon-jian1" v-if="quantity == 1"></i>
							<i class="iconfont icon-jian1" @click="quantity--" v-else></i>
							<input type="text" v-model="quantity">
							<i class="iconfont icon-jia1" @click="quantity++"></i>
						</div>
					</div>
					<button class="btn w100 align-center block cxo-red fs34rem white circle-8" @click="ascertain()">确定</button>
				</div>
			</div>
		</popup> -->

	</div>
</template>

<script>
	import { getActivityList } from "@/api/goods-detail";
	import Default from "@/components/Default";
	import Countdown from "@/components/Countdown";
	import $toast 		from '@/utils/toast';
	import { InfiniteScroll,Popup } from 'mint-ui';	
	export default{
		components: 
		{
			Countdown,
			Default,
			Popup
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				selectString     : '',
				parameterName    : '',
				sku_id           : '',
				stock            : '',
				price            : '',
				specificationImg : '',
				coupon_id        : '',
				fuid             : '',
				popupVisible     : false,
				canselect        : [],
				ListData         : [],
				page_index       : 1,
				quantity         : 1,
				loading          : false,
				flag             : true,
				countdownType    : true,
				data             : this.$store.state.commodity_data,
				img_url          : process.env.IMG_URL,
				img              : require('../../../assets/icon-goods2.png'),
			}
		},
		watch:
		{
			selectString(newVal)
			{
				this.canselect = this.data.sku_list.filter(res => res.sku_name.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					this.price = this.canselect[0].price;
					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		methods:
		{
			loadData()
			{
				this.loading = true;

				var params = {
					type       : '-8',
					page_index : this.page_index++,
					page_size  : 10,
				}
				getActivityList(params).then( res => {

					if( res.data.length > 0 )
					{
						this.ListData = res.data
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			},
				// 规格选中
			selectCate(item,n,index)
			{ 
				if (this.selectArr[n] != item.spec_value_name) 
				{
	                this.selectArr[n] = item.spec_value_name;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.selectString = this.selectArr.join(' '); 
				if(item.spec_img)
					this.specificationImg = this.img_url + item.spec_img;
			},
			//判断规格，库存。
			ascertain()
			{
				if(this.data.spec_list.length > 0 && this.data.stock > 0 )
				{
					if(this.canselect.length != 1)
						return $toast('请选择规格数量');

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
				else
				{
					if(this.data.stock > 0){
						this.sku_id = this.data.sku_list[0].sku_id;
					}
					else
					{
						this.popupVisible = false;
						return $toast('库存不足');
					}

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
			},
			// 参团支付
			offered(item)
			{
				if(item)
				{
					this.coupon_id = item.coupon_id;
					this.fuid = item.fuid;
					this.parameterName = 'offered';
				}

				if(!this.sku_id)
				{
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity
					this.$store.dispatch("skuidList", skuList);
					this.$router.push('/shopping/pay?type=2&coupon_id=' + this.coupon_id + '&fuid=' + this.fuid)
				}

			},
		}
	}
</script>

<style lang="less">
	.group{
		ul
		{
			li
			{
				&:last-child
				{
					border-bottom:initial;
				}
				// img
				// {
				// 	width: 200/28rem;
				// 	height: 200/28rem;
				// 	object-fit: cover;
				// }
				.list-right
				{
					button
					{
						width: 200/28rem;
						padding-top: 10/28rem;
						padding-bottom: 10/28rem;
						border-radius: 8px;
					}
				}
			}
		}
		.mint-popup{
			.shop{
				img{
					width: 200/28rem;
					height: 160/28rem;
					object-fit: cover;
				}
			}
			.specification{
				ul{
					li{
						border-color:#666;
					}
					.is-on{
						border-color: #ff0036;
						color: #ff0036;
					}
				}
			}
			.quantity{
				width: 200/28rem;
			}
			button{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
	}
</style>
